<%@page import="com.bosch.in.rtp1.ept.constant.FinishRecipeConstant"%>
<%@page import="java.util.Calendar"%>
<%@page import="java.util.List"%>
<%@ page import="com.bosch.in.jfree.chart.JfreeChartIntf"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>

<link href="css/imageZoom.css" type="text/css" rel="stylesheet"></link>
<link href="css/modifiedJUI.css" type="text/css" rel="stylesheet"></link>
<script type="text/javascript" src="js/tipmessage.js"></script>
<script type="text/javascript" src="js/imageZoom.js"></script>
<script type="text/javascript" src="js/fshRcpDiagram.js"></script>
<form name="searchForm" action="fshRecipeDiagram.do?cmd=fshRecipeDiagram" method="POST">
<div
	id="toolTipForChart"
	style="display:none;
	position:absolute;
	border-style: solid;
	border: '1px';
	background-color: white;
	z-index:1003;
	padding: 5px;">
</div>
<div id="filterHeader" class="ui-jqgrid ui-widget ui-corner-all">
	<div class = "ui-jqgrid-view">
		<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
			<a id="minFilterButton" class="ui-jqgrid-titlebar-close HeaderButton" href="javascript:void(0)" style="right: 0px;">
				<span id="minButton" class="ui-icon ui-icon-circle-triangle-n"></span>
			</a>
				<span class="ui-jqgrid-title">Filter Criteria</span>
		</div>
	</div>
</div>
<table id="filterCriteria" width="100%" border="0" class="box" >
	<tbody>
		<tr>
			<td>
				<input id="hiddenStage" 			type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.STAGE_PARAM_HIDDEN)%>">
				<input id="hiddenLocation" 			type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.LOCATION_PARAM_HIDDEN)%>">
				<input id="hiddenEqpType" 			type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.EQPTYPE_PARAM_HIDDEN)%>">
				<input id="hiddenEqpId" 			type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.EQUIPID_PARAM_HIDDEN)%>">
				<input id="hiddenPartId" 			type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.PART_ID_PARAM_HIDDEN)%>">
				<input id="hiddenYear" 				type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.YEAR_PARAM_HIDDEN)%>">
				<input id="hiddenCustomerName"		type="hidden" value="<%=request.getAttribute(FinishRecipeConstant.CUSTOMER_PARAM_HIDDEN)%>">
			</td>
		</tr>
		<tr>	
			<td width="60px" nowrap="nowrap" > 
					<span style="width: 60px;display:inline-block;font-size: 11px;">Year</span>
			</td>	
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>
			<td width="120px" >
					<html:select  name="frCriteria" property="selectedYear" styleClass="DropDownTextBox" style="width:100%">
						<html:optionsCollection name="frCriteria" property="years" value="value" label="value"/>
					</html:select>
			</td>
			<td width="10px">
			</td>	
			
			<td width="60px" nowrap="nowrap" > 
				<span style="width: 60px;display:inline-block;font-size: 11px;">Stage</span>
			</td>
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>
			<td width="120px" >
				<html:select  name="frCriteria" property="selectedStage" styleClass="DropDownTextBox" style="width:100%">
					<html:option  value="">Select All</html:option>
					<html:optionsCollection name="frCriteria" property="stages" value="value" label="value"/>
				</html:select>
			</td>	
			<td width="10px">
			</td>	
			<td width="60px" nowrap="nowrap" > 
				<span style="width: 60px;display:inline-block;font-size: 11px;">Equipid</span>
			</td>
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>
			<td width="120px" >
				<html:text name="frCriteria" property="equipId" style="width: 100%;"></html:text>
			</td>
			<td width="10px">
			</td>	
			<td width="100px" nowrap="nowrap" > 
				<span style="width: 100px;display:inline-block;font-size: 11px;">Customer Name</span>
			</td>
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>
			<td width="120px">
				<html:text name="frCriteria" property="customerName" style="width: 100%;"></html:text>
			</td>
			<td width="10px">
			</td>	
			<td>
			</td>
			
		</tr>
		<tr>
			<td width="60px" nowrap="nowrap" > 
				<span style="width: 60px;display:inline-block;font-size: 11px;">Location</span>
			</td>
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>	
			<td width="120px">
				<html:select  name="frCriteria" property="selectedLocation" styleClass="DropDownTextBox" style="width:100%">
					<html:option  value="">Select All</html:option>
					<html:optionsCollection name="frCriteria" property="locations" value="value" label="value"/>
				</html:select>
			</td>
			<td width="10px">
			</td>	
			<td width="60px" nowrap="nowrap" > 
				<span style="width: 60px;display:inline-block;font-size: 11px;">Eqptype</span>
			</td>
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>
			<td width="120px"> 
				<html:select  name="frCriteria" property="selectedEqpType" styleClass="DropDownTextBox" style="width:100%">
					<html:option  value="">Select All</html:option>
					<html:optionsCollection name="frCriteria" property="eqpTypes" value="value" label="value"/>
				</html:select>
			</td>
			<td width="10px">
			</td>	
			<td width="60px" nowrap="nowrap" > 
				<span style="width: 60px;display:inline-block;font-size: 11px;">PartId</span>
			</td>
			<td width="5px" nowrap="nowrap"> 
				<span style="width: 5px;display:inline-block;font-size: 11px;">:</span>
			</td>
			<td width="120px" >
				<html:text name="frCriteria" property="partId" style="width: 100%;"></html:text>
			</td>
			
			<td  colspan="4"> 
			</td>
			<td > 
				<a class="bosch_button_style" href="javascript:loadGraph();">Show</a>
			</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>		
	</tbody>
</table>
</form>
<br/>
<table width="100%" border="0" class="box">
	<tbody>
		<tr>
			<td width="4%" nowrap="nowrap">				
			</td>
			<td width="30%" align="center" nowrap="nowrap"> 
				<span style="font-size: 11px;"> FAB 1 </span>
			</td>
			<td width="30%" align="center" nowrap="nowrap"> 
				<span style="font-size: 11px;"> FAB 2 </span>
			</td>
			<td width="30%" align="center" nowrap="nowrap"> 
				<span style="font-size: 11px;"> FAB 1 + FAB 2 </span>
			</td>
		</tr>	
		<%
			List<String> fileNames = (List<String>) request.getAttribute(FinishRecipeConstant.FNSH_RECP_CHART_LIST);
			for (int i=0; i<FinishRecipeConstant.NUM_OF_CHART_PER_ROW; ++i)
			{
		%>
			<tr>
				<td width="4%" nowrap="nowrap">
					<span style="font-size: 11px;"> Prio <%=i+1%> </span>				
				</td>
				<%
					for (int j=0; j<FinishRecipeConstant.NUM_OF_CHART_PER_ROW; ++j)
					{
						String fileName = fileNames.get((i*FinishRecipeConstant.NUM_OF_CHART_PER_ROW)+j);
						String imgMapFile = fileName + JfreeChartIntf.IMAGEMAP_SUFFIX;
						out.write((String)request.getAttribute(imgMapFile));
				%>
					<td id="images" width="30%" align="center"> 
							<img id="P<%=i+1%>F<%=j+1%>" alt="Prio<%=i+1%>Fab<%=j+1%>" src="servlet/DisplayChart?filename=<%=fileName%>&timestamp=<%=Calendar.getInstance().getTimeInMillis()%>"
								usemap="#<%=fileName%>" border="0">
					</td>
				<%
					}
				%>
			</tr>
		<%
			}
		%>
		<tr height="10px">
		</tr>
		<tr>
			<td>&nbsp;</td>
		</tr>	
	</tbody>
</table>
<br>
<script type="text/javascript">
zoomInAllMap();
</script>
<div id="detailBox" >
</div>
